<div class="containerStyle">
  <h3>描述</h3>
  <p>表格列固定 + 列拖动特性</p>
  <p>表格的列固定功能。使用 tiColumnFixed 指令和带有ti3-table-container 这个样式类的容器配合实现。</p>
  <p class="demo-text-warn">注意：使用 tiOverflow 组件，请导入 TiOverflowModule。</p>
  <h3>示例</h3>

  <ti-table [(displayedData)]="displayed" [srcData]="srcData" [columns]="columns" tiColsResizable>
    <!--在使用表格的列固定功能时一定要给table元素添加带有 ti3-table-container 这个样式类的父容器，并保证这个容器的父元素是ti-table。滚动条是出在这个容器上的-->
    <!--在使用表格的列拖动时要有 ti3-resize-wrapper 这个样式类的父容器-->
    <div class="ti3-table-container ti3-resize-wrapper">
      <table>
        <thead>
          <tr>
            <ng-container *ngFor="let column of columns;">
              <!--在th上利用 tiColumnFixed 开启th的固定功能；接口传入 left 为在左侧固定,左侧可连续多列固定，且必须从第一列开始固定；
                                接口传入 right 为在右侧固定，右侧只能固定一列，且必须是最后一列; 接口传入其他值不会开启固定功能 -->
              <th [tiColumnFixed]="column.fixed" tiOverflow width="{{column.width}}">{{column.title}}</th>
            </ng-container>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let row of displayed;trackBy: trackByFn">
            <!--在td上利用 tiColumnFixed 开启td的固定功能；接口传入 left 为在左侧固定,左侧可连续多列固定，且必须从第一列开始固定；
                            接口传入 right 为在右侧固定，右侧只能固定一列，且必须是最后一列; 接口传入其他值不会开启固定功能 -->
            <td tiColumnFixed="left" tiOverflow>{{row.firstName}}</td>
            <td tiColumnFixed="left" tiOverflow>{{row.lastName}}</td>
            <td tiColumnFixed="left" tiOverflow>{{row.age}}</td>
            <td tiOverflow>{{row.balance}}</td>
            <td tiOverflow>{{row.email}}</td>
            <td tiColumnFixed="right" tiOverflow>{{row.school}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </ti-table>
</div>
